<template>
    <!-- 动态查询 -->
    <el-form :model="page" v-show="showSearch" :inline="true" label-width="68px">
        <el-form-item label="题干名称">
            <el-input v-model="page.question" style="width: 220px" clearable placeholder="请输入题干信息"
                @keyup.enter="handleQuery" />
        </el-form-item>

        <el-form-item label="阶段名称">
            <el-tree-select placeholder="选择阶段" :props="defaultProps" clearable v-model="page.subId" :data="levels"
                :render-after-expand="false" style="width: 220px;" />
        </el-form-item>
        <el-form-item label="题目类型">
            <el-select v-model="page.typeId" placeholder="选择题型" style="width: 240px" clearable
                @keyup.enter="handleQuery">
                <el-option v-for="item in types" :label="item.typeName" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="Search" @click="getData">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>

    <div ref="containerRef"
        style="width: 79%;height: 635px;display: inline-block;overflow-y: auto;-ms-overflow-style: none;scrollbar-width: none;overflow: scroll;">
        <el-empty description="暂无错题" style="margin-top: 10%;" v-if="tableData.length===0"/>
        <el-card :id="'part' + item.question.id" v-for="(item, index) in tableData"
            :body-style="{ padding: item.question.typeId == 3 || item.question.typeId == 4 ? '0px' : '20px' }"
            style="margin-bottom: 15px;">

            <template #header>
                <div class="card-header">
                    <span style="display: inline-block;width: 780px;">{{ index + 1 + ". " +
                        item.question.question.split("/")[0] }}</span>
                    <span style="position: relative;right: 0px;">{{ "(" + (item.question.typeId == 1 ? '单选题' :
                        item.question.typeId == 2 ? '多选题' : item.question.typeId == 3 ? '判断题' : item.question.typeId ==
                            4 ? '简答题' : null) + ")" }}</span>
                    <el-tooltip content="删除该题" placement="top">
                        <el-button link type="primary" icon="Close" @click="subjectDelete(item.question.id)"
                            style="position: relative;left: 100px;top: 0px;"></el-button>
                    </el-tooltip>
                </div>
            </template>

            <p style="margin-top: 10px;" v-if="item.question.typeId == 1"
                :style="{ color: item.question.answerTxt == 'A' && i == 0 ? 'red' : item.question.answerTxt == 'B' && i == 1 ? 'red' : item.question.answerTxt == 'C' && i == 2 ? 'red' : item.question.answerTxt == 'D' && i == 3 ? 'red' : 'BLACK' }"
                v-for="(text, i) in item.question.question.split('/')[1].split('_')" class="text item">{{ text }}</p>
            <p v-if="item.question.typeId == 2"
                :style="{ color: getColor(item.question.answerTxt, i) ? 'red' : 'black' }"
                v-for="(text, i) in item.question.question.split('/')[1].split('_')" class="text item">{{ text }}</p>
            <template #footer>答案：<span
                    :style="{ color: item.question.typeId == 3 && item.question.answerTxt ? 'green' : 'red' }">{{
                        item.question.answerTxt
                    }}</span></template>
        </el-card>
    </div>
    <div
        style="width: 20%;display: inline-block;height: 635px;overflow-y: auto;-ms-overflow-style: none;scrollbar-width: none;overflow: scroll;">
        <el-anchor style="height: 600px;" :container="containerRef" direction="vertical" type="horizontal" :offset="238"
            @click="handleClick">
            <el-anchor-link v-for="(item, index) in tableData" style="size: 20px;" :href="'#part' + item.question.id"
                :title="index + 1 + '.' + item.question.question.split('/')[0]" />
        </el-anchor>
    </div>
</template>
<script setup>
import { findAllType, findAllLevel } from '@/api/admin/questions.js';
import { getErrorBookList, getErrorBookDel } from '@/api/user/errorBook';
import { ref, onMounted, watch } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore1 } from '../../store/userStore.js'

const user = useUserStore1().userInfo;
const defaultProps = {
    children: 'slearningProgress',
    label: 'levelName',
}
const editFlog = ref(false)
const loading = ref(false)
const showSearch = ref(true);
const tableData = ref([])
const levels = ref([])
const types = ref([])
const type = ref([])
const dels = ref([])
const total = ref(0)


const getColor = (text, i) => {
    var boo = false
    text.split("").forEach(element => {
        if (element == "A" && i == 0 || element == "B" && i == 1 || element == "C" && i == 2 || element == "D" && i == 3) {
            boo = true
        }
    });
    return boo
}
const page = ref({
    userId: user.userId,
    typeId: '',
    subId: '',
    question: '',
    pageNum: 1,
    pageSize: 10
})

/** 重置按钮操作 */
function resetQuery() {
    page.value.typeId = '';
    page.value.subId = '';
    page.value.question = '';
    handleQuery();
}
/** 搜索按钮操作 */
function handleQuery() {
    page.value.pageNum = 1;
    getData();
}
/** 删除按钮操作 */
function subjectDelete(row) {
    dels.value.push(row)
    ElMessageBox.confirm(
        '您确认要删除嘛?',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            getErrorBookDel(dels.value, user.userId).then(res => {
                if (res.data.code == 200) {
                    ElMessage.success('删除成功')
                    editFlog.value = false
                    getData()
                } else {
                    ElMessage.error(res.data.message)
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
}
onMounted(() => {
    getData();
    getLevel();
    getType();
})
const getData = () => {
    loading.value = true
    getErrorBookList(page.value).then(res => {
        tableData.value = res.data.obj.records
        total.value = res.data.obj.total
        loading.value = false
    })
}

const getLevel = () => {
    findAllLevel().then(res => {
        levels.value.push({
            levelName: "全部试题",
            value: null
        })
        res.data.obj.forEach(element1 => {
            element1.value = element1.id
            element1.slearningProgress.forEach(element2 => {
                element2.value = element2.id
                element2.levelName = element2.name
                element2.slearningProgress = element2.ssubjects
                element2.slearningProgress.forEach(element3 => {
                    element3.levelName = element3.subjectName
                    element3.value = element3.id
                });
            });
            levels.value.push(element1)
        });
    })
}

const getType = () => {
    findAllType().then(res => {
        types.value.push({ id: null, typeName: '全部题型' })
        res.data.obj.forEach(element => {
            types.value.push(element)
        });
        type.value = res.data.obj
    })
}
</script>
